import React from 'react'
import ReactDOM from 'react-dom'
import { inject, observer } from 'mobx-react'
import { toJS } from 'mobx'
import { Tools, SwipeAction, Modal, List, TextareaItem, Switch as WeaSwitch, ColorPicker, Button } from 'weaver-mobile'
import { withRouter, Route, Switch } from 'react-router-dom'
import { Icon } from 'weaver-mobile'
import Wrttag from '../../public/wrttag'
import QueueAnim from 'rc-queue-anim'
import * as TaskMainApis from '../../api/task/taskMain'

const FormItem = List.FormItem
const getLabel = Tools.getLabel

@inject("taskCommonStore")
@withRouter
@observer
class Tagmanage extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      listDatas: [],
      listVisible: true,
      detailVisible: false,
      colorpickerVisible: false,
      detailTag: {},
      pickercolor: "",
      isSaving: false,
      ...props,
    }
  }

  componentWillMount() {
    this.getListDatas()
  }

  componentDidUpdate() {

  }

  componentWillUnmount() {

  }

  getListDatas = () => {
    const { showLoading, closeLoading } = this.props.taskCommonStore

    showLoading()
    TaskMainApis.tagOperate({
      operate: "searchList",
      isMobile: "1"
    }).then(res => {
      closeLoading()
      if (res) {
        let datas = res.datas || []
        let listDatas = []
        datas.forEach((d, i) => {
          listDatas.push({
            id: d.id,
            name: d.name,
            color: d.color,
            enabled: true
          })
        })
        this.setState({
          listDatas
        })
      }
    })
  }

  onTagEdit = (tag) => {
    this.setState({
      detailVisible: true,
      detailTag: tag
    })
  }

  onTagDelete = (tag) => {
    const { showLoading, closeLoading, deleteSuccess } = this.props.taskCommonStore
    const { listDatas } = this.state

    Modal.alert(getLabel('386786', '信息确认'), getLabel(127574, '确定删除吗？'), [
      {
        text: getLabel(201, '取消'),
        style: 'default'
      },
      {
        text: getLabel('826', '确定'),
        onPress: () => {
          showLoading()
          TaskMainApis.tagOperate({
            operate: "del",
            ids: tag.id
          }).then(res => {
            closeLoading()
            if (res && res.status == "1") {
              deleteSuccess()
              let newDatas = listDatas.filter((d, i) => {
                return d.id != tag.id
              })
              this.setState({
                listDatas: newDatas
              })
            }
          })
        }
      }
    ])
  }

  doSaveTag = () => {
    const { id, name, color, enabled } = this.state.detailTag
    const { showLoading, closeLoading, saveSuccess } = this.props.taskCommonStore
    if (this.crossValidate()) {
      showLoading()
      this.setState({
        isSaving: true
      }, () => {
        TaskMainApis.tagOperate({
          operate: "save",
          id,
          tagname: name,
          color,
          deleted: enabled ? "0" : "1"
        }).then(res => {
          closeLoading()
          if (res && res.status == "1") {
            saveSuccess(null, () => {
              this.setState({
                detailVisible: false,
                isSaving: false
              })
              this.getListDatas()
            })
          }
        })
      })
    }
  }

  crossValidate = () => {
    const { name } = this.state.detailTag
    const { remind } = this.props.taskCommonStore
    if (!name) {
      remind(getLabel(506468, '标签名称不能为空!'))
      return false
    }
    return true
  }

  render() {
    const { listDatas, listVisible, detailVisible, colorpickerVisible, detailTag, pickercolor, isSaving } = this.state

    return (
      <QueueAnim>
        {
          listVisible &&
          <div key="workrelate-mobile-task-tag-manage-list" className="workrelate-mobile-task-tag-manage-list">
            <div className="tag-manage-new-wrapper">
              <div className="tag-manage-new" onClick={() => {
                this.setState({
                  detailVisible: true,
                  detailTag: {
                    id: "",
                    name: "",
                    color: "#6aa84f",
                    enabled: "1"
                  }
                })
              }}>
                <Icon type="more" size="xxs" color="#4169E1" />
                <span className="tag-manage-text">{getLabel('83263', '新建标签')}</span>
              </div>
            </div>
            <div className="tag-manage-content-wrapper">
              <div key={new Date().getTime() + ""} className="tag-manage-content">
                {
                  listDatas.map((d, i) => {
                    return (
                      <SwipeAction
                        key={d.id}
                        autoClose
                        right={
                          [
                            {
                              text: getLabel('501169', '编辑'),
                              onPress: () => this.onTagEdit(toJS(d)),
                              style: { backgroundColor: '#4169E1', color: 'white', padding: "5px 12px" },
                            },
                            {
                              text: getLabel(91, '删除'),
                              onPress: () => this.onTagDelete(toJS(d)),
                              style: { backgroundColor: '#666', color: 'white', padding: "5px 12px" },
                            }
                          ]
                        }
                      >
                        <div className="list-item-wrapper">
                          <Wrttag
                            lable={d.name}
                            bgcolor={d.color}
                            autoAdapt={false}
                            width={"auto"}
                            height={25}
                          />
                        </div>
                      </SwipeAction>
                    )
                  })
                }
              </div>
            </div>
          </div>
        }

        {
          detailVisible &&
          <div key="workrelate-mobile-task-tag-manage-tag-detail" className="workrelate-mobile-task-tag-manage-tag-detail">
            <div className="content-wrapper">
              <List>
                <FormItem
                  required={!detailTag.name}
                  extra={<Icon type="editor" size="xxs" />}
                  // label={getLabel(81323, '标签名称')}
                  label={getLabel(33439, '名称')}
                  line
                  noBorder
                  content={
                    <TextareaItem
                      value={detailTag.name}
                      placeholder={getLabel('83869', '请输入')}
                      autoHeight
                      onChange={v => {
                        this.setState({
                          detailTag: {
                            ...detailTag,
                            name: v
                          }
                        })
                      }}
                    />
                  }
                />
              </List>
              <List>
                <FormItem
                  ref={ref => {
                    if (ref) {
                      ReactDOM.findDOMNode(ref).onclick = () => {
                        this.setState({
                          colorpickerVisible: true,
                          pickercolor: detailTag.color
                        })
                      }
                    }
                  }}
                  extra={<Icon type="right" />}
                  label={getLabel(495, '颜色')}
                  noBorder
                  line
                  content={
                    <div className="tag-text-wrapper" style={{ color: detailTag.color }}>
                      {detailTag.color}
                    </div>
                  }
                />
              </List>
            </div>
            <div className="bottom-wrapper">
              <span className="btn-item-wrapper">
                <Button type="primary" onClick={() => { this.doSaveTag() }} disabled={isSaving}>{getLabel(86, '保存')}</Button>
              </span>
              <span className="btn-item-wrapper">
                <Button type="ghost" onClick={() => { this.setState({ detailVisible: false }) }}>{getLabel(31129, '取消')}</Button>
              </span>
            </div>
          </div>
        }

        {
          colorpickerVisible &&
          <div
            key="workrelate-mobile-task-tag-manage-color-picker"
            className="workrelate-mobile-task-tag-manage-color-picker"
          >
            <div className="color-wrapper">
              <ColorPicker
                color={pickercolor}
                onChange={color => {
                  this.setState({
                    pickercolor: color.hex
                  })
                }}
              />
            </div>
            <div className="save-wrapper">
              <span className="btn-item-wrapper">
                <Button
                  type="primary"
                  onClick={() => {
                    this.setState({
                      detailTag: {
                        ...detailTag,
                        color: this.state.pickercolor
                      },
                      colorpickerVisible: false
                    })
                  }}
                >
                  {getLabel('826', '确定')}
                </Button>
              </span>
              <span className="btn-item-wrapper">
                <Button
                  type="ghost"
                  onClick={() => {
                    this.setState({
                      colorpickerVisible: false
                    })
                  }}
                >
                  {getLabel(31129, '取消')}
                </Button>
              </span>
            </div>
          </div>
        }
      </QueueAnim>
    )
  }
}

export default Tagmanage
